<script setup lang="ts">
import { useReformInstallationApplyList } from "@fl/api/elevator-api";
import { SearchForm, SearchTable } from "@fl/components";
import { cloneDeep } from "lodash-es";
import type { PlusColumn } from "plus-pro-components";
import dayjs from 'dayjs'
import type { VxeGridProps, VxePagerEvents } from "vxe-table";
defineOptions({
  name: "retrofit-elevator-requirement-list",
});
type IState = {
  ownerName: string
  areaName: string
  projectName: string
  building: string
  unit: string
  timeRange: any
}
const initialState = {
  ownerName: "",
  areaName: "",
  projectName: "",
  building: "",
  unit: "",
  timeRange: [],
};
const state = ref<IState>(cloneDeep(initialState));

const initialPage = {
  currentPage: 1,
  pageSize: 10,
  total: 0,
};
const tablePage = ref(cloneDeep(initialPage));
const params = computed(() => ({
  pageIndex: tablePage.value.currentPage,
  pageSize: tablePage.value.pageSize,
  submitFlag: false,
  ...state.value,
  orderBy: "create_time", //根据创建时间排序
  orderType: "desc", //降序
}));
const { data, isLoading } = useReformInstallationApplyList(params);
const records = ref();

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.value.currentPage = currentPage;
  tablePage.value.pageSize = pageSize;
};

watchEffect(() => {
  if (data.value) {
    records.value = cloneDeep(data.value.records);
    tablePage.value.total = data.value.total!;
  }
});
const columns: PlusColumn[] = [
  {
    label: "业主信息",
    prop: "ownerName",
    valueType: "input",
  },
  {
    label: "区",
    prop: "areaName",
    valueType: "select",
  },
  {
    label: "小区",
    prop: "projectName",
    valueType: "select",
  },
  {
    label: "栋",
    prop: "building",
    valueType: "select",
  },
  {
    label: "单元",
    prop: "unit",
    valueType: "select",
  },
  {
    fieldProps: {
      endPlaceholder: "结束日期",
      format: "YYYY-MM-DD",
      startPlaceholder: "开始日期",
      type: "daterange",
      valueFormat: "YYYY-MM-DD",
    },
    label: "提交时间",
    prop: "createTime",
    valueType: "date-picker",
    'disabled-date': (time: Date) => {
                            return dayjs(time).isAfter(dayjs(new Date()).format('YYYY-MM-DD 23:59:59'))
                        },
  },
];
const gridOptions = reactive<VxeGridProps>({
  columns: [
    { field: "applyNo", title: "编号" },
    { field: "areaName", title: "所在区" },
    { field: "projectName", title: "小区" },
    { field: "building", title: "栋-单元" },
    { field: "submitFlag", title: "提交状态" },
    { field: "status", title: "审核状态" },
    { slots: { default: "operate" }, title: "操作", width: 200 },
  ],
});
function reset() {
  state.value = initialState;
  tablePage.value = initialPage;
}
function submit(values: any) {
  if (values?.timeRange?.length > 0) {
    values.startTime = `${values?.timeRange[0]} 00:00:00`;
    values.endTime = `${values?.timeRange[1]} 23:59:59`;
  }
  state.value = cloneDeep(values);
  tablePage.value.currentPage = 1;
}
</script>

<template>
  <ElCard class="mb-20" shadow="never">
    <SearchForm
      submit-text="搜索"
      v-bind="state"
      :columns="columns"
      @reset="reset"
      @submit="submit"
    />
  </ElCard>

  <ElCard shadow="never">
    <SearchTable
      v-bind="gridOptions"
      v-model:pager="tablePage"
      :loading="isLoading"
      :data="records"
      @page-change="handlePageChange"
    >
      <template #operate="{ row }">
        <el-button text type="primary"> 审核 </el-button>

        <el-button text> 详情 </el-button>
      </template>
    </SearchTable>
  </ElCard>
</template>
